<template>
  <div class="price">
    <van-sticky :offset-top="46">
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="option1Active"
          :options="option1"
          @change="selectType(option1Active)"
        />
      </van-dropdown-menu>
    </van-sticky>
    <div class="table-dom">
      <van-row class="table-title">
        <van-col span="8">名称</van-col>
        <van-col span="4">价格</van-col>
        <van-col span="6">涨跌</van-col>
        <van-col span="6">日期</van-col>
      </van-row>
      <div v-for="(i,index) in datalist " :key="index" @click="href(i)">
        <van-row
          class="table-item"
          :class="[{'table-item-up':i.flag=='up'},{'table-item-down':i.flag=='down'}]"
        >
          <van-col class="table-item-list" span="8">
            <p class="dh">{{i.kname}}</p>
          </van-col>
          <van-col class="table-item-list table-item-price" span="4">{{i.price}}</van-col>
          <van-col class="table-item-list table-item-status" span="6">
            <div class="status-but">{{i.gain}}</div>
          </van-col>
          <van-col class="table-item-list" span="6">{{i.inputdate}}</van-col>
        </van-row>
      </div>
    </div>
    <loginDom v-if="!islogin"></loginDom>
  </div>
</template>

<script type="text/ecmascript-6">
// import { getcapacitycats, getchannelcapacitylist } from "../../api/datanum";
import loginDom from "../../components/tipsLogin";
export default {
  components: {
    loginDom
  },
  data() {
    return {
      islogin: true,
      checked: false,
      option1Active: "",
      option1: [
        {
          channel: this.$route.query.channel,
          cid: "",
          menuname: "全部",
          text: "全部",
          value: ""
        }
      ],
      datalist: []
    };
  },
  methods: {
    //跳转
    href(i) {
      if (!this.islogin) {
       this.$store.commit("muloginmoduleshow",true)
        return false;
      }
      let query = {};
      query.channel = i.channel;
      query.linkcatid = i.catId;
      query.menuname = i.kname;
      query.fromSet = "datumpart";
      this.$router.push({ path: "/priceSj", query: query });
    },
    //选择分类
    selectType(i) {
      console.log(i);
      this.getList();
    },
    //获取分类
    getmenu() {
      let obj = {};
      obj.channel = this.$route.query.channel;
      getcapacitycats(obj).then(res => {
        if (res.code == "0000") {
          let array = res.data;
          for (let index = 0; index < array.length; index++) {
            const element = array[index];
            element.text = element.menuname;
            element.value = element.linkcatid;
            element.cid = element.linkcatid;
          }
          this.option1 = this.option1.concat(array);
          this.option1Active = this.option1[0].cid;
        }
      });
    },
    //获取列表
    getList() {
      let obj = {};
      obj.channel = this.$route.query.channel;
      obj.cid = this.option1Active;
      getchannelcapacitylist(obj).then(res => {
        if (res.code == "0000") {
          this.islogin = true;
          this.datalist = res.data || [
            {
              id: "426561",
              catId: "314",
              kname: "土状石墨粉",
              specs: "碳60,200目",
              origin: "",
              price: "1200.00",
              oldPrice: "1200.0",
              gain: "0.00",
              flag: "normal",
              remark: "",
              inputdate: "2019-07-30",
              select: 1,
              channel: "dc"
            }
          ];
        } else if (res.code == "0007" || res.code == "0009") {
          this.islogin = false;
          this.datalist = res.data || [
            {
              id: "426561",
              catId: "314",
              kname: "土状石墨粉",
              specs: "碳60,200目",
              origin: "",
              price: "1200.00",
              oldPrice: "1200.0",
              gain: "0.00",
              flag: "normal",
              remark: "",
              inputdate: "2019-07-30",
              select: 1,
              channel: "dc"
            }
          ];
        }
      });
    }
  },
  created() {
  
    this.getmenu();
    this.getList();
  }
};
</script>
<style scoped lang="less">
.price {
  width: 100%;
  min-height: 100%;
  background: #ffffff;
}
.van-dropdown-menu {
  box-shadow: 0px 0.04rem 0.08rem 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 0.3rem;
}

.table-dom {
  .table-title {
    height: 0.64rem;
    line-height: 0.64rem;
    background: rgba(245, 243, 242, 1);
    font-size: 0.26rem;
    text-align: center;
    color: rgba(110, 111, 117, 1);
  }
  .router-link-bg {
    background: #ffffff;
    &:nth-child(2n + 1) {
      background: rgba(249, 249, 249, 1);
    }
  }
  .table-item {
    height: 1.08rem;
    text-align: center;
    color: rgba(39, 41, 55, 1);
    font-size: 0.26rem;
    line-height: 1.5;
    .status-but {
      min-width: 1.2rem;
      max-width: 100%;
      height: 0.4rem;
      font-size: 0.24rem;
      background: #f4f4f4;
      line-height: 0.4rem;
      position: relative;
      border-radius: 0.05rem;
      overflow: hidden;
    }
    &.table-item-up {
      .table-item-price {
        color: #37a10c;
      }
      .status-but {
        padding-left: 0.4rem;
        padding-right: 0.1rem;
        background: #ebf5e6;
        color: #37a10c;
        &::before {
          content: "-";
        }
        &::after {
          display: block;
          content: "";
          border-width: 0.1rem;
          border-style: solid;
          border-color: #37a10c transparent transparent transparent;
          position: absolute;
          top: 0.15rem;
          left: 0.15rem;
        }
      }
    }
    &.table-item-down {
      .table-item-price {
        color: #d82d27;
      }
      .status-but {
        padding-left: 0.4rem;
        padding-right: 0.1rem;
        background: #fdefef;
        color: #d82d27;
        &::before {
          content: "+";
        }
        &::after {
          display: block;
          content: "";
          border-width: 0.1rem;
          border-style: solid;
          border-color: transparent transparent #d82d27 transparent;
          position: absolute;
          top: 0.05rem;
          left: 0.15rem;
        }
      }
    }
  }
  .table-item-list {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}
</style>
